<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	    <style type="text/css">
	    	*{
				margin: 0;
				padding: 0;
			}
			/* 设置outer的样式 */
			#outer{
				/* 设置宽和高 */
				width: 520px;
				height: 333px;
				/* 居中 */
				margin: 50px auto;
				/* 设置背景颜色 */
				background-color: greenyellow;
				/* 设置padding */
				padding: 10px 0;
				/* 开启相对定位 */
				position: relative;
				/* 裁剪溢出的内容 */
				overflow: hidden;
			}
			img{
				width: 500px;
				height: 333px;
			}
			/* 设置imgList */
			#imgList{
				/* 去除项目符号 */
				list-style: none;
				/* 设置ul的宽度 */
				/* width: 2600px; */
				/* 开启绝对定位 */
				position: absolute;
				/* 设置偏移量 */
				/* 每向左移动520px,就会显示到下一张图片 */
				left: -1040px;
			}
			/* 设置图片中的li */
			#imgList li{
				/* 设置浮动 */
				float: left;
				/* 设置左右外边距 */
				margin: 0 10px;
			}
			/* 设置导航按钮 */
			#navDiv{
				/* 开启绝对定位 */
				position: absolute;
				/* 设置位置 */
				bottom: 15px;
				/* left: 197px; */
			}
			#navDiv a{
				/* 设置超链接浮动 */
				float: left;
				/* 设置超链接的宽和高 */
				width: 15px;
				height: 15px;
				/* 设置背景颜色 */
				background-color: red;
				/* 设置左右外边距 */
				margin: 0 5px;
				/* 设置透明 */
				opacity: 0.5;
				/* 兼容IE8透明 */
				filter: alpha(opacity=50);
			}
			/* 设置鼠标移入的效果 */
			#navDiv a:hover{
				background-color: black;
			}
	    </style>
		<script type="text/javascript" src="js/tools.js"></script>
		<script type="text/javascript">
			window.onload = function(){
				// 获取imgList
				var imgList = document.getElementById("imgList");
				// 获取页面中所有的img标签
				var imgArr = document.getElementsByTagName("img");
				// 设置imgList的宽度
				imgList.style.width = 520*imgArr.length+"px";
				// 设置导航按钮居中
				// 获取navDiv
				var navDiv = document.getElementById("navDiv");
				// 获取outer
				var outer = document.getElementById("outer");
				// 设置navDiv的left值
				navDiv.style.left = (outer.offsetWidth - navDiv.offsetWidth)/2 + "px";
				// 默认显示图片的索引
				var index = 0;
				// 获取所有的a
				var allA = document.getElementsByTagName("a");
				// 设置默认选中的效果
				allA[index].style.backgroundColor = "black";
				// 点击超链接切换到指定的图片
				// 点击第一个超链接,显示第一个图片
				// 点击第二个超链接,显示第二个图片
				// 为所有的超链接都绑定单机响应函数
				for(var i=0;i<allA.length;i++){				
					// 为每个超链接都添加一个num属性
					allA[i].num = i;
					// 为超链接绑定单机响应函数
					allA[i].onclick = function(){
						// 关闭自动切换的定时器
						clearInterval(timer);
						// 获取点击超链接的索引,并将其设置为index
						index = this.num;
						// 切换图片
						// imgList.style.left = -520*index + "px";
						// 设置选中a
						setA();
						// 使用move函数来切换图片
						move(imgList,"left",-520*index,20,function(){
							// 动画执行完毕,开启自动切换
							autoChange();
						});
					}
				}
				
				// 开启自动切换图片
				autoChange()
				
				// 创建一个方法用来设置选中的a
				function setA(){
					// 判断当前索引是否是最后一张图片
					if(index >= imgArr.length - 1){
						// 则将index设置为0
						index = 0;
						// 此时显示的最后一张图片,而最后一张图片和第一张是一模一样
						// 通过CSS将最后一张切换成第一张
						imgList.style.left = 0;
					}
					
					// 遍历所有的a,并将它们的背景颜色设置为红色
					for(var i=0;i<allA.length;i++){
						allA[i].style.backgroundColor = "";
					}
					// 将选中的a设置为黑色
					allA[index].style.backgroundColor = "black";
				};
				// 定义一个自动切换的定时器的标识
				var timer;
				// 创建一个函数,用来开启自动切换图片
				function autoChange(){
					// 开启一个定时器,用来定时去切换图片
					timer = setInterval(function(){
						// 使索引自增
						index++;
						// 判断index的值
						index %= imgArr.length;
						// 执行动画,切换图片
						move(imgList,"left",-520*index,20,function(){
							// 修改导航按钮
							setA();
						});
					},3000);
				}
				
			};
		</script>
	</head>
	<body>
		<!-- 创建一个外部的div,来作为大的容器 -->
		<div id="outer">
			<!-- 创建一个ul,用来放置图片 -->
			<ul id="imgList">
				<li><img src="img/1.jpg"/></li>
				<li><img src="img/2.jpg"/></li>
				<li><img src="img/3.jpg"/></li>
				<li><img src="img/4.jpg"/></li>
				<li><img src="img/5.jpg"/></li>
				<li><img src="img/1.jpg"/></li>
			</ul>
			<!-- 创建导航按钮 -->
			<div id="navDiv">
				<a href="javascript:;"></a>
				<a href="javascript:;"></a>
				<a href="javascript:;"></a>
				<a href="javascript:;"></a>
				<a href="javascript:;"></a>
			</div>
		</div>
	</body>
</html>
